<template style="background: #f5f6fa">
  <div class="typical-home" ref="portaletDiv">
    <!-- rgb(255, 111, 14) 业绩目标 #5ab2fb 拨打电话 #fe4530 跟进客户 #6ad6b8
    客户上门 #5ab2fb 新增进件 #60d1eb 回款金额 -->

    <a-row :gutter="[8, 8]">
      <!-- 顶部列表 -->
      <a-col :span="17" class="module-list">
        <!-- 数据概览 -->
        <a-row
          v-hasPermi="['biz:showindexData:query']"
          style="margin-bottom: 8px"
        >
          <a-col :span="24">
            <a-card>
              <div class="data-view">
                <div class="data-box color-1">
                  <div class="data-number">{{ dataBoxInfo.dbOne }}</div>
                  <div class="data-info">
                    <span>新增未跟进客户 ></span>
                  </div>
                </div>
                <div class="data-box color-2">
                  <div class="data-number">{{ dataBoxInfo.dbTwo }}</div>
                  <div class="data-info">
                    <span>新增邀约客户 ></span>
                  </div>
                </div>
                <div class="data-box color-3">
                  <div class="data-number">{{ dataBoxInfo.dbThree }}</div>
                  <div class="data-info">
                    <span>今日待上门客户 ></span>
                  </div>
                </div>
                <div class="data-box color-4">
                  <div class="data-number">{{ dataBoxInfo.dbFour }}</div>
                  <div class="data-info">
                    <span>今日上门待进件 ></span>
                  </div>
                </div>
                <div class="data-box color-5">
                  <div class="data-number">{{ dataBoxInfo.dbFive }}</div>
                  <div class="data-info">
                    <span>今日应还款笔数 ></span>
                  </div>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
        <!-- 数据简报 -->
        <a-row v-hasPermi="['biz:showindexData:query']">
          <a-col :span="24">
            <a-card>
              <a-row
                :gutter="20"
                type="flex"
                justify="space-between"
                style="padding: 20px 20px 0px 20px"
                align="middle"
              >
                <a-col>
                  <h3>数据简报</h3>
                </a-col>
                <a-space
                  :size="20"
                  style="margin-bottom: 20px; margin-right: 40px"
                >
                  <a-tree-select
                    v-model="deptId"
                    style="width: 180px"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="deptOptions"
                    placeholder="请选择"
                    :replaceFields="{
                      children: 'children',
                      title: 'menuName',
                      key: 'id',
                      value: 'id',
                    }"
                    @change="onMenuTreeChange"
                  >
                  </a-tree-select>

                  <a-select
                    placeholder="请选择客户经理"
                    v-model="userId"
                    style="width: 150px"
                    allow-clear
                    @change="onUserChange"
                  >
                    <a-select-option
                      v-for="d in userNamesList"
                      :key="d.name"
                      :value="d.id"
                      >{{ d.name }}</a-select-option
                    >
                  </a-select>

                  <a-popover
                    title=""
                    placement="bottom"
                    trigger="click"
                    :visible="dataDateclicked"
                    @visibleChange="handleClickChangeDataDate"
                  >
                    <template slot="content">
                      <a-row style="width: 380px">
                        <a-col :span="5">按类型时间</a-col>
                        <a-col :span="24">
                          <a-row style="margin-top: 10px">
                            <a-col :span="3" style="margin-right: 22px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changeJianbaoDate('toDay', '今日')"
                                >今日</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 22px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changeJianbaoDate('yesterday', '昨日')"
                                >昨日</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 22px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changeJianbaoDate('toWeek', '本周')"
                                >本周</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 22px"
                              ><a-button
                                :size="dateButtonType"
                                @click="changeJianbaoDate('toMonth', '本月')"
                                >本月</a-button
                              ></a-col
                            >
                            <a-col :span="3"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changeJianbaoDate('lastMonth', '上月')"
                                >上月</a-button
                              ></a-col
                            >
                          </a-row>
                          <a-row style="margin-top: 10px">
                            <a-col :span="3" style="margin-right: 25px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="
                                  changeJianbaoDate('toQuarter', '本季度')
                                "
                                >本季度</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 25px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="
                                  changeJianbaoDate('lastQuarter', '上季度')
                                "
                                >上季度</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 20px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changeJianbaoDate('toYear', '今年')"
                                >今年</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 20px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changeJianbaoDate('lastYear', '去年')"
                                >去年</a-button
                              ></a-col
                            >
                          </a-row>
                          <a-col :span="5" style="margin-top: 10px"
                            >自定义时间</a-col
                          >
                          <a-col :span="24" style="margin-top: 10px">
                            <a-range-picker
                              style="width: 100%"
                              v-model="dateRange"
                              valueFormat="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              allow-clear
                            />
                          </a-col>
                          <a-col
                            :span="24"
                            style="text-align: right; margin-top: 10px"
                          >
                            <a-button
                              type="primary"
                              @click="checkChangeJianbaoDate"
                              >确认</a-button
                            >
                          </a-col>
                        </a-col>
                      </a-row>
                    </template>
                    <a-button>{{ dataDateText }}</a-button>
                  </a-popover>
                </a-space>
              </a-row>
              <a-row :gutter="[20, 20]" style="padding: 0px 20px">
                <a-col :span="24">
                  <div class="flex warp">
                    <div class="d-item">
                      <img src="@/assets/images/clueCount.png" />
                      <div class="d-info">
                        <p class="d-title">新增线索数</p>
                        <p class="d-number">
                          {{ shortDataInfo.sdXs || 0 }}
                        </p>
                      </div>
                    </div>
                    <div class="d-item">
                      <img src="@/assets/images/intentionCount.png" />
                      <div class="d-info">
                        <p class="d-title">新增客户数</p>
                        <p class="d-number">{{ shortDataInfo.sdKh || 0 }}</p>
                      </div>
                    </div>
                    <div class="d-item">
                      <img src="@/assets/images/connectCount.png" />
                      <div class="d-info">
                        <p class="d-title">通话接通数</p>
                        <p class="d-number">{{ shortDataInfo.sdJt || 0 }}</p>
                      </div>
                    </div>
                    <div class="d-item" v-if="false">
                      <img src="@/assets/images/timeCount.png" />
                      <div class="d-info">
                        <p class="d-title">通话时常</p>
                        <p class="d-number">00:14:31</p>
                      </div>
                    </div>
                    <div class="d-item">
                      <img src="@/assets/images/followCount.png" />
                      <div class="d-info">
                        <p class="d-title">跟进客户数</p>
                        <p class="d-number">{{ shortDataInfo.sdGj || 0 }}</p>
                      </div>
                    </div>
                    <div class="d-item" v-if="false">
                      <img src="@/assets/images/newOrderCount.png" />
                      <div class="d-info">
                        <p class="d-title">客户上门数</p>
                        <p class="d-number">--</p>
                      </div>
                    </div>

                    <div class="d-item">
                      <img src="@/assets/images/visitOrderCount.png" />
                      <div class="d-info">
                        <p class="d-title">客户上门数</p>
                        <p class="d-number">{{ shortDataInfo.sdSm || 0 }}</p>
                      </div>
                    </div>
                    <div class="d-item">
                      <img src="@/assets/images/signCount.png" />
                      <div class="d-info">
                        <p class="d-title">已签单数</p>
                        <p class="d-number">{{ shortDataInfo.sdQd || 0 }}</p>
                      </div>
                    </div>

                    <div class="d-item">
                      <img src="@/assets/images/amountOfReal.png" />
                      <div class="d-info">
                        <p class="d-title">新增支出(万)</p>
                        <p class="d-number">
                          {{ formatNumber(shortDataInfo.sdZc) }}
                        </p>
                      </div>
                    </div>
                    <div class="d-item">
                      <img src="@/assets/images/visitCount.png" />
                      <div class="d-info">
                        <p class="d-title">新增进件数</p>
                        <p class="d-number">{{ shortDataInfo.sdJj || 0 }}</p>
                      </div>
                    </div>

                    <div class="d-item" v-if="false">
                      <img src="@/assets/images/orderFollowCount.png" />
                      <div class="d-info">
                        <p class="d-title">进件跟进数</p>
                        <p class="d-number">--</p>
                      </div>
                    </div>
                    <div class="d-item">
                      <img src="@/assets/images/newLendingOrderCount.png" />
                      <div class="d-info">
                        <p class="d-title">已放款数</p>
                        <p class="d-number">{{ shortDataInfo.sdFk || 0 }}</p>
                      </div>
                    </div>
                    <div class="d-item">
                      <img src="@/assets/images/amountOfLending.png" />
                      <div class="d-info">
                        <p class="d-title">放款金额(万)</p>
                        <p class="d-number">
                          {{ formatNumber(shortDataInfo.sdFkAmount) }}
                        </p>
                      </div>
                    </div>
                    <div class="d-item">
                      <img src="@/assets/images/amountOfRefund.png" />
                      <div class="d-info">
                        <p class="d-title">已回款数</p>
                        <p class="d-number">{{ shortDataInfo.sdHk || 0 }}</p>
                      </div>
                    </div>
                    <div class="d-item">
                      <img src="@/assets/images/orderFollowCount.png" />
                      <div class="d-info">
                        <p class="d-title">回款金额(万)</p>
                        <p class="d-number">
                          {{ formatNumber(shortDataInfo.sdHkAmount) }}
                        </p>
                      </div>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
        </a-row>
        <!-- 排行榜 -->
        <a-row style="margin-top: 8px" v-hasPermi="['biz:showindexData:query']">
          <a-col :span="24">
            <a-card>
              <a-row
                :gutter="20"
                type="flex"
                justify="space-between"
                style="padding: 20px 20px 0px 20px"
                align="middle"
              >
                <a-col>
                  <h3>排行榜</h3>
                </a-col>
                <!-- <a-col :span="19" v-if="false">
                  <a-select
                    ref="select"
                    v-model="rankSelect"
                    style="width: 200px"
                    @change="handleChange"
                  >
                    <a-select-option value="1">部门内排行榜</a-select-option>
                    <a-select-option value="2">公司内排行榜</a-select-option>
                  </a-select>
                </a-col> -->
                <a-space
                  :size="20"
                  style="margin-bottom: 20px; margin-right: 40px"
                >
                  <a-radio-group v-model="paihangType" button-style="solid">
                    <a-radio-button value="a"> 个人 </a-radio-button>
                    <a-radio-button value="b"> 部门 </a-radio-button>
                  </a-radio-group>

                  <a-popover
                    title=""
                    placement="bottom"
                    trigger="click"
                    :visible="paihangclicked"
                    @visibleChange="handleClickChangePaiHangDate"
                  >
                    <template slot="content">
                      <a-row style="width: 380px">
                        <a-col :span="5">按类型时间</a-col>
                        <a-col :span="24">
                          <a-row style="margin-top: 10px">
                            <a-col :span="3" style="margin-right: 22px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('toDay', '今日')"
                                >今日</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 22px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('yesterday', '昨日')"
                                >昨日</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 22px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('toWeek', '本周')"
                                >本周</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 22px"
                              ><a-button
                                :size="dateButtonType"
                                @click="changePaiHangDate('toMonth', '本月')"
                                >本月</a-button
                              ></a-col
                            >
                            <a-col :span="3"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('lastMonth', '上月')"
                                >上月</a-button
                              ></a-col
                            >
                          </a-row>
                          <a-row style="margin-top: 10px">
                            <a-col :span="3" style="margin-right: 25px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="
                                  changePaiHangDate('toQuarter', '本季度')
                                "
                                >本季度</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 25px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="
                                  changePaiHangDate('lastQuarter', '上季度')
                                "
                                >上季度</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 20px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('toYear', '今年')"
                                >今年</a-button
                              ></a-col
                            >
                            <a-col :span="3" style="margin-right: 20px"
                              ><a-button
                                type=""
                                :size="dateButtonType"
                                @click="changePaiHangDate('lastYear', '去年')"
                                >去年</a-button
                              ></a-col
                            >
                          </a-row>
                          <a-col :span="5" style="margin-top: 10px"
                            >自定义时间</a-col
                          >
                          <a-col :span="24" style="margin-top: 10px">
                            <a-range-picker
                              style="width: 100%"
                              v-model="dateRangePaihang"
                              valueFormat="YYYY-MM-DD"
                              format="YYYY-MM-DD"
                              allow-clear
                            />
                          </a-col>
                          <a-col
                            :span="24"
                            style="text-align: right; margin-top: 10px"
                          >
                            <a-button
                              type="primary"
                              @click="checkChangePaiHangDate"
                              >确认</a-button
                            >
                          </a-col>
                        </a-col>
                      </a-row>
                    </template>
                    <a-button style="">{{ paihangDateText }}</a-button>
                  </a-popover>
                </a-space>
              </a-row>
              <a-row style="padding: 20px 20px 0px 20px">
                <a-col :span="24">
                  <a-tabs :activeKey="tabKey" @change="callback">
                    <a-tab-pane key="1" tab="回款金额（元）"></a-tab-pane>
                    <a-tab-pane key="2" tab="放款金额（元）"></a-tab-pane>
                  </a-tabs>
                </a-col>
              </a-row>
              <a-row :gutter="[20, 20]" style="padding: 20px 20px 40px 10px">
                <a-col :span="8">
                  <a-table
                    rowKey="userName"
                    :columns="paihangcolumns"
                    :data-source="paihangdataself"
                    size="middle"
                    :pagination="false"
                    :locale="{ emptyText: '暂无排行数据' }"
                    v-if="paihangType == 'a'"
                    :customRow="handleCustomRow"
                  >
                    <span slot="rowIndex" slot-scope="text, record">
                      <img
                        v-if="record.rowIndex == 1"
                        src="@/assets/img/index/paihangbang/1.png"
                      />
                      <img
                        v-else-if="record.rowIndex == 2"
                        src="@/assets/img/index/paihangbang/2.png"
                      />
                      <img
                        v-else-if="record.rowIndex == 3"
                        src="@/assets/img/index/paihangbang/3.png"
                      />
                      <span v-else> {{ record.rowIndex }}</span>
                    </span>
                  </a-table>
                  <a-table
                    rowKey="deptName"
                    :columns="paihangdeptcolumns"
                    :data-source="paihangdatadept"
                    size="middle"
                    :pagination="false"
                    :locale="{ emptyText: '暂无排行数据' }"
                    v-if="paihangType == 'b'"
                    :customRow="handleCustomRow"
                  >
                    <span slot="rowIndex" slot-scope="text, record">
                      <img
                        v-if="record.rowIndex == 1"
                        src="@/assets/img/index/paihangbang/1.png"
                      />
                      <img
                        v-else-if="record.rowIndex == 2"
                        src="@/assets/img/index/paihangbang/2.png"
                      />
                      <img
                        v-else-if="record.rowIndex == 3"
                        src="@/assets/img/index/paihangbang/3.png"
                      />
                      <span v-else> {{ record.rowIndex }}</span>
                    </span>
                  </a-table>
                </a-col>
                <a-col :span="16">
                  <h3 class="rank-title">
                    <span v-if="tabKey === '1'">回款金额（元）</span>
                    <span v-if="tabKey === '2'">放款金额（元）</span>
                  </h3>
                  <div class="echarts-box">
                    <div class="rank-view" v-show="paihangType == 'a'">
                      <div
                        class="rank-line"
                        v-for="(item, index) in paihangdataself"
                        :key="index"
                      >
                        <div class="line-back">
                          <div
                            class="line-fill"
                            :style="{
                              width: getFillWidth(item.checkHuikuan) + '%',
                              background: getFillColor(index),
                            }"
                          >
                            <span class="rank-amount">{{
                              item.checkHuikuan
                            }}</span>
                            <img
                              class="rank-avatar"
                              :src="getAvatar(index)"
                              alt="avatar"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="rank-view" v-show="paihangType == 'b'">
                      <div
                        class="rank-line"
                        v-for="(item, index) in paihangdatadept"
                        :key="index"
                      >
                        <div class="line-back">
                          <div
                            class="line-fill"
                            :style="{
                              width: getFillWidth2(item.checkHuikuan) + '%',
                              background: getFillColor(index),
                            }"
                          >
                            <span class="rank-amount2">{{
                              item.checkHuikuan
                            }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- <div
                      class="echarts-item"
                      ref="echartsItem"
                      v-show="paihangType == 'a'"
                    ></div>
                    <div
                      class="echarts-item"
                      ref="echartsItem2"
                      v-show="paihangType == 'b'"
                    ></div> -->
                  </div>
                </a-col>
              </a-row>
              <!-- <a-button type="" @click="TestWebS">Test</a-button>
              <a-button type="" @click="TestWebS2">Test2</a-button> -->
            </a-card>
          </a-col>
        </a-row>
      </a-col>
      <!-- 页面右侧内容 -->
      <a-col :span="7" class="module-list">
        <!-- 遗忘提醒 -->
        <a-row v-if="false">
          <a-col :span="24">
            <a-card>
              <a-row :gutter="[20, 20]" style="padding: 20px 20px 0 20px">
                <a-col :span="24">
                  <h3>遗忘提醒</h3>
                </a-col>
              </a-row>
              <a-row :gutter="[20, 20]" style="padding: 0px 20px 20px 20px">
                <a-col :span="24">
                  <div class="flex warp">
                    <div class="warn-box">
                      <div class="warn-title">3天内即将掉入公海</div>
                      <div class="warn-number">0</div>
                    </div>
                    <div class="warn-box">
                      <div class="warn-title">进件待处理</div>
                      <div class="warn-number">0</div>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
        </a-row>
        <!-- 快捷操作 -->
        <a-row style="margin-top: 8px">
          <a-col :span="24">
            <a-card>
              <a-row :gutter="[20, 20]" style="padding: 20px">
                <a-col :span="24">
                  <h3>快捷操作</h3>
                </a-col>
              </a-row>
              <a-row :gutter="[20, 20]" style="padding: 0px 20px 20px 20px">
                <a-col
                  :span="8"
                  style="text-align: center"
                  @click="handleAddCustomer"
                  class="mhover"
                >
                  <img class="btn-img" src="@/assets/images/btn-1.png" />
                  <div>新增客户</div>
                </a-col>
                <a-col
                  :span="8"
                  style="text-align: center"
                  @click="handleToPathjinjian"
                  class="mhover"
                >
                  <img class="btn-img" src="@/assets/images/btn-2.png" />
                  <div>贷款计算器</div>
                </a-col>
                <a-col
                  :span="8"
                  style="text-align: center"
                  @click="handleToPathMyCustomer"
                  class="mhover"
                >
                  <img class="btn-img" src="@/assets/images/btn-3.png" />
                  <div>写新跟进</div>
                </a-col>
              </a-row>
              <a-row :gutter="[20, 20]" style="padding: 0px 20px 40px 20px">
                <a-col :span="8" style="text-align: center">
                  <img class="btn-img" src="@/assets/images/btn-4.png" />
                  <div>今日待跟进客户</div>
                  <div style="color: #999">
                    {{ daiwanchengData.kjDgj || 0 }}位
                  </div>
                </a-col>
                <a-col :span="8" style="text-align: center">
                  <img class="btn-img" src="@/assets/images/btn-5.png" />
                  <div>今日新增重点客户</div>
                  <div style="color: #999">
                    {{ daiwanchengData.kjZd || 0 }}位
                  </div>
                </a-col>
                <a-col :span="8" style="text-align: center">
                  <img class="btn-img" src="@/assets/images/btn-6.png" />
                  <div>今日签约客户</div>
                  <div style="color: #999">
                    {{ daiwanchengData.kjCj || 0 }}位
                  </div>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
        </a-row>
        <!-- 最新消息通知 -->
        <a-row style="margin-top: 8px">
          <a-col :span="24">
            <a-card>
              <a-row :gutter="[20, 20]" style="padding: 20px 20px 0 20px">
                <a-col :span="20">
                  <h3>最新消息通知</h3>
                </a-col>
                <a-col :span="4">
                  <span class="more-span" @click="toMsgPageClick"
                    >更多消息</span
                  >
                </a-col>
              </a-row>
              <a-row :gutter="[20, 20]" style="padding: 0px 20px 20px 20px">
                <a-col :span="24">
                  <div class="list-box">
                    <div
                      class="list"
                      v-for="(item, index) in msgList"
                      :key="index"
                    >
                      <p>
                        <img
                          class="list-img"
                          src="@/assets/images/list-icon.png"
                        />
                        <span>{{ item.msgDesc }}</span>
                      </p>
                      <p>
                        <span class="list-time">{{ item.createTime }}</span>
                        <span class="list-goto" @click="linkTopage(item)"
                          >去处理</span
                        >
                      </p>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <a-modal
      :visible="CalculatorModalVisible"
      title="贷款计算器"
      v-if="CalculatorModalVisible"
      width="50%"
      @ok="CalculatorModalVisible = false"
      @cancel="CalculatorModalVisible = false"
      :dialog-style="{ top: '10px' }"
      style="height: 10vh"
    >
      <CalculatorModal />
    </a-modal>
    <!-- 修改密码抽屉 -->
    <add-customer-info-form
      v-if="showAddInfoModal"
      ref="AddCustomerInfoForm"
      @close="showAddInfoModal = false"
      @ok="skipPageToMyIndex"
    />
  </div>
</template>

<script>
// import { getIndexTarGetInfo } from "@/api/biz/bizDeptTarget";
import { listDeptTree } from "@/api/system/dept";
import { testWebSocket, testWebSocket2 } from "@/api/biz/bizCustomer";
import CalculatorModal from "@/views/dashboard/portal/CalculatorModal";
import { mapGetters } from "vuex";
import AddCustomerInfoForm from "@/views/dashboard/portal/moudles/AddCustomerInfoForm";
import { listUser } from "@/api/system/user";

import { listBizMessageInfo } from "@/api/biz/bizMessageInfo";
import {
  getDataBoxInfo,
  getShortDataInfo,
  indexPaiHangBangSelf,
  indexPaiHangBangDept,
  getKuaiJieDataInfo,
} from "@/api/biz/bizHome";
export default {
  components: {
    CalculatorModal,
    AddCustomerInfoForm,
  },
  data() {
    return {
      msgList: [],
      shortDataInfo: {},
      dataBoxInfo: {},
      tabKey: "1",
      rankSelect: "1",
      echartsItem: null,
      echartsItem2: null,
      CalculatorModalVisible: false,
      showAddInfoModal: false,
      manHead: require("@/assets/images/head-man.png"), // 引入男性头像图片,
      womanHead: require("@/assets/images/head-woman.png"), // 引入男性头像图片,
      // 月度新增标题
      monthTitle: "",
      // 总计标题
      allTitle: "",
      // 总计占比标题
      allStaTitle: "",
      // 总计年度标题
      yearTtile: "",
      visible: false,
      data: [],
      monthData: [],
      fromOptions: [],
      staOptions: [],
      dateFormat: "YYYY-MM-DD",
      compile: false,
      len: [],
      paihangType: "a",
      paihangDateText: "本月",
      dataDate: "toMonth",
      dataDateText: "本月",
      paihangDataDate: "toMonth",
      changePaihangDateText: "",
      changeDateText: "",
      paihangclicked: false,
      dataDateclicked: false,
      dateRange: [],
      dateRangePaihang: [],
      deptId: "",
      // 待完成
      daiwanchengData: { genjinCounts: 0, shangmenCounts: 0 },
      paihangcolumns: [
        {
          title: "排名",
          align: "center",
          dataIndex: "rowIndex",
          key: "rowIndex",
          width: "20%",
          scopedSlots: { customRender: "rowIndex" },
        },
        {
          title: "姓名",
          dataIndex: "userName",
          align: "center",
          width: "25%",
        },
        {
          title: "部门",
          dataIndex: "deptName",
          align: "center",
          width: "25%",
        },
        // {
        //   title: "回款金额(元)",
        //   dataIndex: "checkHuikuan",
        //   align: "center",
        //   width: "30%",
        // },
      ],
      paihangdeptcolumns: [
        {
          title: "排名",
          align: "center",
          dataIndex: "rowIndex",
          key: "rowIndex",
          width: "25%",
          scopedSlots: { customRender: "rowIndex" },
        },

        {
          title: "部门",
          dataIndex: "deptName",
          align: "center",
          width: "35%",
        },
        // {
        //   title: "回款金额(元)",
        //   dataIndex: "checkHuikuan",
        //   align: "center",
        //   width: "40%",
        // },
      ],
      dateButtonType: "large",
      paihangdataself: [],
      paihangdatadept: [],
      selectMoth: undefined,
      // 卡片加载
      listLoading: false,
      // 总数卡片
      cardLoading: false,
      indexData: [],
      allMonthStudent: {
        createTime: undefined,
      },
      allStudent: {
        createTime: undefined,
      },
      student: {
        createTime: undefined,
      },
      studenter: {
        createTime: undefined,
      },
      option: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [],
      },
      deptOptions: [],
      getDeptTarget: [],
      deptTarget: [],
      busTypeOptions: [],
      carStatusOptions: [],
      statusOptions: [],
      typeOptions: [],
      userNamesList: [],
      isKefu: 2,
      // 根据岗位删选员工
      postIds: ["gwzg", "rzgw", "qyjl", "sg"],
      userId: null,
      kpiType: "month",
      getDeptTargetModel: {
        calls: 0,
        addCus: 0,
        genjins: 0,
        gohome: 0,
        jinjians: 0,
        shouru: 0,
      },
      deptTargetModel: {
        calls: 0,
        addCus: 0,
        genjins: 0,
        gohome: 0,
        jinjians: 0,
        shouru: 0,
      },
    };
  },
  watch: {
    // paihangType(value) {
    //   if (value === "b") {
    //     this.$nextTick(() => {
    //       // if (!this.echartsItem2) {
    //       this.setData2(); // 延迟初始化
    //       // }
    //     });
    //   } else {
    //     this.$nextTick(() => {
    //       // if (!this.echartsItem) {
    //       this.setData(); // 延迟初始化
    //       // }
    //     });
    //   }
    // },
  },
  created() {
    this.getDeptList();

    this.handleindexPaiHangBangDept(this.paihangDataDate);
    this.handleindexPaiHangBangSelf(this.paihangDataDate);
    this.handleGetCaoZuoDaiwan();
    this.handleListMsg();
  },
  mounted() {
    this.handleGetIndexTarGetInfo();
  },
  computed: {
    ...mapGetters(["company"]),
  },
  methods: {
    formatNumber(num) {
      return (parseFloat(num || 0) / 10000).toFixed(2);
    },

    toMsgPageClick() {
      this.$router.push({
        path: "/biz/messageinfo/index",
      });
    },

    linkTopage(item) {
      const router = item.router;

      this.$router.push({
        path: router,
      });
    },

    /**
     * 查询消息通知
     */
    handleListMsg() {
      const msgQueryParam = {
        pageNum: 1,
        pageSize: 10,
        status: undefined,
      };
      listBizMessageInfo(msgQueryParam).then((response) => {
        this.msgList = response.data.list;
      });
    },

    skipPageToMyIndex() {
      this.showAddInfoModal = false;
      const toPageUri = "/customer_manage/myindex";
      this.$router.push({ path: toPageUri });
    },

    /** tab选显卡操作 */
    callback(v) {
      this.tabKey = v;
      console.log("this.dataDate", this.paihangDataDate);
      if (this.paihangType === "a") {
        this.handleindexPaiHangBangSelf(this.paihangDataDate);
      } else {
        this.handleindexPaiHangBangDept(this.paihangDataDate);
      }
    },
    getDataBoxInfo() {
      getDataBoxInfo().then((res) => {
        if (res.code === 200) {
          this.dataBoxInfo = res.data;
        }
      });
    },

    handleChange(value) {
      console.log("select:", value);
    },
    setData() {
      const dataLength = this.paihangdataself.length; // 获取数据量
      const baseMinHeight = 150; // 基础最小高度
      const minHeight = Math.max(
        baseMinHeight,
        dataLength * 20 + baseMinHeight
      ); // 根据数据量动态计算最小高度，确保最小高度不会低于 baseMinHeight
      const itemHeight = 45.45; // 每条数据的高度
      const chartHeight = Math.max(minHeight, dataLength * itemHeight); // 动态计算高度

      // 设置容器高度
      this.$refs.echartsItem.style.height = `${chartHeight}px`;

      // 如果 ECharts 实例已经存在，先销毁
      if (this.echartsItem) {
        this.echartsItem.dispose();
      }

      this.echartsItem = this.$echarts.init(this.$refs.echartsItem);

      let data = [];
      this.paihangdataself.forEach((res) => {
        const temp = {
          name: res.userName, // 使用表格中的用户名
          value: res.checkHuikuan, // 使用表格中的回款金额
        };
        if (res.checkHuikuan) {
          data.push(temp);
        }
      });
      data = data.sort((a, b) => a.value - b.value); // 按回款金额从大到小排序

      const imgList = [];
      data.map((item, index) => {
        if (index % 2 === 0) {
          imgList.push(this.manHead);
        } else {
          imgList.push(this.womanHead);
        }
      });

      // 柱状图头部图标嵌入
      var imgData = [];
      data.forEach((e, index) => {
        imgData.push({
          value: e.value,
          symbol: `image://${imgList[index]}`,
        });
      });

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            const rankParam = params.find(
              (param) => param.seriesName === "排行"
            );
            if (rankParam) {
              return rankParam.name + ": " + rankParam.value;
            }
            return "";
          },
        },
        grid: {
          left: "-20%",
          right: "0%",
          top: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          show: false, // 隐藏 X 轴
        },
        yAxis: {
          type: "category",
          data: data.map((item) => item.name), // 保持 yAxis 数据顺序不变
          show: false, // 隐藏 Y 轴
          axisLabel: {
            margin: 100, // 增加 yAxis 标签的间距，从而增加行距
          },
        },
        series: [
          // {
          //   z:1,
          //   name: "背景",
          //   type: "bar",
          //   barWidth: 20, // 与主柱状图宽度一致
          //   barGap: "-100%", // 将背景条与主柱状图重叠
          //   data: data.map(() => Math.max(...data.map(item => item.value))), // 背景条的高度设置为数据中的最大值
          //   itemStyle: {
          //     color: "#F5F5F5", // 灰色背景色
          //     borderRadius: [10, 10, 10, 10], // 背景条的圆角
          //   },
          //   label: {
          //     show: false, // 隐藏背景条的标签
          //   },
          // },
          {
            z: 1,
            name: "背景",
            type: "bar",
            barWidth: 20, // 设置背景条宽度
            barGap: "-100%", // 将背景条与主柱状图重叠
            data: data.map(() => {
              const maxValue = Math.max(...data.map((item) => item.value)); // 获取数据中的最大值
              const digitCount = Math.floor(Math.log10(maxValue)); // 计算最大值的位数
              const addValue = Math.pow(10, digitCount); // 根据位数动态计算要添加的值
              return maxValue + addValue; // 返回最大值 + 动态添加的值
            }),
            itemStyle: {
              color: "#F5F5F5", // 灰色背景色
              borderRadius: [10, 10, 10, 10], // 背景条的圆角
            },
            label: {
              show: false, // 隐藏背景条的标签
            },
          },
          {
            z: 2,
            name: "排行",
            type: "bar",
            barWidth: 20, // 固定柱状图宽度
            barMinHeight: 80,
            data: data.map((item, index) => {
              const lastIndex = data.length - 1; // 最后一条的索引
              const secondLastIndex = data.length - 2; // 倒数第二条的索引

              if (index === secondLastIndex) {
                // 倒数第二项渐变色
                item.itemStyle = {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      { offset: 0, color: "#FFFFFF" }, // 渐变色起点
                      { offset: 1, color: "#FF8460" }, // 渐变色终点
                    ],
                  },
                  borderRadius: [10, 10, 10, 10], // 柱状图的圆角
                };
              } else if (index === lastIndex) {
                // 最后一项渐变色
                item.itemStyle = {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      { offset: 0, color: "#FFFFFF" }, // 渐变色起点
                      { offset: 1, color: "#FE8E00" }, // 渐变色终点
                    ],
                  },
                  borderRadius: [10, 10, 10, 10], // 柱状图的圆角
                };
              } else {
                // 其他项默认渐变色
                item.itemStyle = {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      { offset: 0, color: "#FFFFFF" }, // 渐变色起点
                      { offset: 1, color: "#62AAFA" }, // 渐变色终点
                    ],
                  },
                  borderRadius: [10, 10, 10, 10], // 柱状图的圆角
                };
              }
              return item;
            }),
            label: {
              show: true,
              position: "insideRight",
              offset: [-10, 0],
              color: "#FFFFFF",
              formatter: "{c}",
            },
          },
          {
            name: "",
            z: 3,
            type: "pictorialBar",
            barGap: "-100%",
            barMinHeight: 80,
            symbolPosition: "end",
            symbolSize: 30,
            symbolOffset: ["70%", "0%"],
            data: imgData,
          },
        ],
      };
      this.echartsItem.setOption(option);
    },
    setData2() {
      const dataLength = this.paihangdataself.length; // 获取数据量
      const baseMinHeight = 150; // 基础最小高度
      const minHeight = Math.max(
        baseMinHeight,
        dataLength * 20 + baseMinHeight
      ); // 根据数据量动态计算最小高度，确保最小高度不会低于 baseMinHeight
      const itemHeight = 45.45; // 每条数据的高度
      const chartHeight = Math.max(minHeight, dataLength * itemHeight); // 动态计算高度

      // 设置容器高度
      this.$refs.echartsItem2.style.height = `${chartHeight}px`;

      // 如果 ECharts 实例已经存在，先销毁
      if (this.echartsItem2) {
        this.echartsItem2.dispose();
      }

      this.echartsItem2 = this.$echarts.init(this.$refs.echartsItem2);

      let data = [];
      this.paihangdatadept.forEach((res) => {
        const temp = {
          name: res.deptName, // 使用表格中的部门名
          value: res.checkHuikuan, // 使用表格中的回款金额
        };
        if (res.checkHuikuan) {
          data.push(temp);
        }
      });
      data = data.sort((a, b) => a.value - b.value); // 按回款金额从大到小排序

      // const imgList = [];
      // data.map((item, index) => {
      //     if (index % 2 === 0) {
      //       imgList.push(this.manHead);
      //     } else {
      //       imgList.push(this.womanHead);
      //     }
      // });

      // // 柱状图头部图标嵌入
      // var imgData = [];
      // data.forEach((e, index) => {
      //   imgData.push({
      //     value: e.value,
      //     symbol: `image://${imgList[index]}`,
      //   });
      // });

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            const rankParam = params.find(
              (param) => param.seriesName === "排行"
            );
            if (rankParam) {
              return rankParam.name + ": " + rankParam.value;
            }
            return "";
          },
        },
        grid: {
          left: "-20%",
          right: "0%",
          top: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          show: false, // 隐藏 X 轴
        },
        yAxis: {
          type: "category",
          data: data.map((item) => item.name), // 保持 yAxis 数据顺序不变
          show: false, // 隐藏 Y 轴
          axisLabel: {
            margin: 100, // 增加 yAxis 标签的间距，从而增加行距
          },
        },
        series: [
          {
            z: 1,
            name: "背景",
            type: "bar",
            barWidth: 20, // 设置背景条宽度
            barGap: "-100%", // 将背景条与主柱状图重叠
            data: data.map(() => {
              const maxValue = Math.max(...data.map((item) => item.value)); // 获取数据中的最大值
              const digitCount = Math.floor(Math.log10(maxValue)); // 计算最大值的位数
              const addValue = Math.pow(10, digitCount); // 根据位数动态计算要添加的值
              return maxValue + addValue; // 返回最大值 + 动态添加的值
            }),
            itemStyle: {
              color: "#F5F5F5", // 灰色背景色
              borderRadius: [10, 10, 10, 10], // 背景条的圆角
            },
            label: {
              show: false, // 隐藏背景条的标签
            },
          },
          {
            z: 2,
            name: "排行",
            type: "bar",
            barWidth: 20, // 固定柱状图宽度
            barMinHeight: 80,
            data: data.map((item, index) => {
              const lastIndex = data.length - 1; // 最后一条的索引
              const secondLastIndex = data.length - 2; // 倒数第二条的索引

              if (index === secondLastIndex) {
                // 倒数第二项渐变色
                item.itemStyle = {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      { offset: 0, color: "#FFFFFF" }, // 渐变色起点
                      { offset: 1, color: "#FF8460" }, // 渐变色终点
                    ],
                  },
                  borderRadius: [10, 10, 10, 10], // 柱状图的圆角
                };
              } else if (index === lastIndex) {
                // 最后一项渐变色
                item.itemStyle = {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      { offset: 0, color: "#FFFFFF" }, // 渐变色起点
                      { offset: 1, color: "#FE8E00" }, // 渐变色终点
                    ],
                  },
                  borderRadius: [10, 10, 10, 10], // 柱状图的圆角
                };
              } else {
                // 其他项默认渐变色
                item.itemStyle = {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      { offset: 0, color: "#FFFFFF" }, // 渐变色起点
                      { offset: 1, color: "#62AAFA" }, // 渐变色终点
                    ],
                  },
                  borderRadius: [10, 10, 10, 10], // 柱状图的圆角
                };
              }
              return item;
            }),
            label: {
              show: true,
              position: "insideRight",
              offset: [-10, 0],
              color: "#FFFFFF",
              formatter: "{c}",
            },
          },
          // {
          //   name: "",
          //   z: 3,
          //   type: "pictorialBar",
          //   barGap: "-100%",
          //   barMinHeight:80,
          //   symbolPosition: "end",
          //   symbolSize: 30,
          //   symbolOffset: ["70%", "0%"],
          //   data: imgData,
          // },
        ],
      };
      this.echartsItem2.setOption(option);
    },
    handleCustomRow(record, index) {
      const style = {};
      if (index === 0) {
        style.background = "linear-gradient(90deg, #FFEED3 0%, #FFFFFF 100%)";
      } else if (index === 1) {
        style.background = "linear-gradient(90deg, #FBD6C9 0%, #FFFFFF 100%)";
      } else if (index === 2) {
        style.background = "linear-gradient(90deg, #DDF0FC 0%, #FFFFFF 100%)";
      } else if (record.isCurrent === 1) {
        style.background = "#ffebee";
      }
      return {
        style,
      };
    },
    changeKpiType() {
      this.handleGetIndexTarGetInfo();
    },

    freshDeptTargetCharts() {
      this.getDeptTargetModel.calls = this.getDeptTarget.mCalls;
      this.getDeptTargetModel.addCus = this.getDeptTarget.mAddCus;
      this.getDeptTargetModel.genjins = this.getDeptTarget.mGenjins;
      this.getDeptTargetModel.gohome = this.getDeptTarget.mGohome;
      this.getDeptTargetModel.jinjians = this.getDeptTarget.mJinjians;
      this.getDeptTargetModel.shouru = this.getDeptTarget.mShouru;
      switch (this.kpiType) {
        case "day":
          // this.getDeptTargetModel.calls = this.getDeptTarget.dCalls;
          // this.getDeptTargetModel.addCus = this.getDeptTarget.dAddCus;
          // this.getDeptTargetModel.genjins = this.getDeptTarget.dGenjins;
          // this.getDeptTargetModel.gohome = this.getDeptTarget.dGohome;
          // this.getDeptTargetModel.jinjians = this.getDeptTarget.dJinjians;
          // this.getDeptTargetModel.shouru = this.getDeptTarget.dShouru;

          this.deptTargetModel.calls = this.deptTarget.dCalls;
          this.deptTargetModel.addCus = this.deptTarget.dAddCus;
          this.deptTargetModel.genjins = this.deptTarget.dGenjins;
          this.deptTargetModel.gohome = this.deptTarget.dGohome;
          this.deptTargetModel.jinjians = this.deptTarget.dJinjians;
          this.deptTargetModel.shouru = this.deptTarget.dShouru;
          break;
        case "week":
          // this.getDeptTargetModel.calls = this.getDeptTarget.wCalls;
          // this.getDeptTargetModel.addCus = this.getDeptTarget.wAddCus;
          // this.getDeptTargetModel.genjins = this.getDeptTarget.wGenjins;
          // this.getDeptTargetModel.gohome = this.getDeptTarget.wGohome;
          // this.getDeptTargetModel.jinjians = this.getDeptTarget.wJinjians;
          // this.getDeptTargetModel.shouru = this.getDeptTarget.wShouru;

          this.deptTargetModel.calls = this.deptTarget.wCalls;
          this.deptTargetModel.addCus = this.deptTarget.wAddCus;
          this.deptTargetModel.genjins = this.deptTarget.wGenjins;
          this.deptTargetModel.gohome = this.deptTarget.wGohome;
          this.deptTargetModel.jinjians = this.deptTarget.wJinjians;
          this.deptTargetModel.shouru = this.deptTarget.wShouru;
          break;
        case "month":
          this.deptTargetModel.calls = this.deptTarget.mCalls;
          this.deptTargetModel.addCus = this.deptTarget.mAddCus;
          this.deptTargetModel.genjins = this.deptTarget.mGenjins;
          this.deptTargetModel.gohome = this.deptTarget.mGohome;
          this.deptTargetModel.jinjians = this.deptTarget.mJinjians;
          this.deptTargetModel.shouru = this.deptTarget.mShouru;
          break;
        default:
          break;
      }
    },
    getUserList(deptId) {
      if (!deptId) {
        this.userId = null;
        this.userNamesList = [];
        return;
      }
      const params = {
        pageNum: 1,
        pageSize: 100,
        deptId: deptId,
      };
      if (this.isKefu) {
        params.isKefu = this.isKefu;
      }
      if (this.postIds) {
        params.postIds = this.postIds;
      }
      listUser(params).then((res) => {
        this.userNamesList = res.data.list;
      });
    },

    handleGetIndexTarGetInfo() {
      // var param = {
      //   deptId: this.deptId,
      //   userId: this.userId,
      //   kpiType: this.kpiType,
      // };
      // getIndexTarGetInfo(param).then((res) => {
      //   this.getDeptTarget = res.data.getDeptTarget;
      //   this.deptTarget = res.data.deptTarget;
      //   this.freshDeptTargetCharts();
      // });
    },
    TestWebS() {
      testWebSocket().then((res) => {
        // this.$message.success(res.msg);
      });
    },
    TestWebS2() {
      testWebSocket2().then((res) => {
        // this.$message.success(res.msg);
      });
    },
    handleAddCustomer() {
      this.showAddInfoModal = true;
      this.$nextTick(() => this.$refs.AddCustomerInfoForm.handleShowModal());
    },
    handleToPathMyCustomer() {
      const toPageUri = "/customer_manage/myindex";
      this.$router.push({ path: toPageUri });
    },
    handleToPathjinjian() {
      // this.$router.push({
      //   path: "/biz/jinjianinfo/yushenindex",
      // });
      this.CalculatorModalVisible = true;
    },
    handleGetCaoZuoDaiwan() {
      getKuaiJieDataInfo().then((res) => {
        this.daiwanchengData = res.data;
      });
    },
    getDeptList() {
      listDeptTree("0", 3, 2, 1).then((response) => {
        this.deptOptions = response.data;
        this.deptId = this.deptOptions[0].id;
        this.getUserList(this.deptId);

        this.handleIndexDataJianBao();
      });
    },
    // 排行榜选择时间气泡
    handleClickChangePaiHangDate(visible) {
      this.paihangclicked = visible;
    },
    // 数据简报选择时间气泡
    handleClickChangeDataDate(visible) {
      this.dataDateclicked = visible;
    },

    // 数据简报时间筛选
    changeJianbaoDate(date, dateText) {
      this.dataDate = date;
      this.chagneDateText = dateText;
      this.dateRange = [];
    },

    checkChangeJianbaoDate() {
      if (this.chagneDateText) {
        this.dataDateText = this.chagneDateText ? this.chagneDateText : "本月";
      } else {
        if (this.dateRange && this.dateRange.length > 0) {
          this.dataDateText = this.dateRange[0] + " ~ " + this.dateRange[1];
          // this.dataDateText = "自定义时间";
        } else {
          this.dataDateText = "本月";
        }
      }

      this.dataDateclicked = false;
      this.handleIndexDataJianBao();
      this.chagneDateText = "";
    },
    // 排行榜数据筛选
    changePaiHangDate(date, dateText) {
      this.paihangDataDate = date;
      this.changePaihangDateText = dateText;
      this.datePaihangRange = [];
    },
    checkChangePaiHangDate() {
      if (this.changePaihangDateText) {
        this.paihangDateText = this.changePaihangDateText
          ? this.changePaihangDateText
          : "本月";
      } else {
        if (this.dateRangePaihang && this.dateRangePaihang.length > 0) {
          this.paihangDateText =
            this.dateRangePaihang[0] + " ~ " + this.dateRangePaihang[1];
          // this.paihangDateText = "自定义时间";
        } else {
          this.paihangDateText = "本月";
        }
      }

      this.paihangclicked = false;
      this.handleindexPaiHangBangSelf(this.paihangDataDate);
      this.handleindexPaiHangBangDept(this.paihangDataDate);
    },

    onMenuTreeChange() {
      this.getUserList(this.deptId);

      this.handleIndexDataJianBao();
      this.handleGetIndexTarGetInfo();
    },
    onUserChange() {
      this.handleIndexDataJianBao();
      this.handleGetIndexTarGetInfo();
    },
    // 排行榜
    handleindexPaiHangBangSelf(date) {
      var param = {
        dateText: date,
        dataType: this.tabKey,
        dateRange: this.dateRangePaihang,
      };
      indexPaiHangBangSelf(param).then((res) => {
        this.paihangdataself = res.data.map((item) => ({
          ...item,
          checkHuikuan: item.checkHuikuan || 0,
        }));
        // this.setData();
      });
    },
    // 数据简报
    handleindexPaiHangBangDept(date) {
      var param = {
        dateText: date,
        dataType: this.tabKey,
        dateRange: this.dateRangePaihang,
      };
      indexPaiHangBangDept(param).then((res) => {
        this.paihangdatadept = res.data.map((item) => ({
          ...item,
          checkHuikuan: item.checkHuikuan || 0,
        }));
        // this.setData2();
      });
    },
    // 数据简报
    handleIndexDataJianBao() {
      var param = {
        dateText: this.dataDate,
        deptId: this.deptId,
        dateRange: this.dateRange,
        userId: this.userId,
      };
      console.log("param", param);
      getShortDataInfo(param).then((res) => {
        if (res.code === 200) {
          this.shortDataInfo = res.data;
        }
      });
      this.getDataBoxInfo();
    },
    // 计算进度条宽度
    getFillWidth(amount) {
      // 如果 amount 为 undefined 或 null，默认设置为 0
      const safeAmount = amount || 0;

      // 过滤掉无效值（NaN 或 undefined），并将缺失的字段默认设置为 0
      const validAmounts = this.paihangdataself
        .map((item) => item.checkHuikuan || 0) // 如果 checkHuikuan 不存在，默认设置为 0
        .filter((value) => !isNaN(value)); // 过滤掉 NaN

      // 如果没有有效值，返回最小宽度 10%
      if (validAmounts.length === 0) return 10;

      // 计算最大值
      const maxAmount = Math.max(...validAmounts);

      // 如果最大值为 0，返回最小宽度 10%
      if (maxAmount === 0) return 10;

      // 计算宽度，并限制在 10% 到 90% 之间
      const width = (safeAmount / maxAmount) * 90;
      return Math.min(Math.max(width, 10), 90);
    },
    // 计算进度条宽度
    getFillWidth2(amount) {
      // 过滤掉无效值（NaN 或 undefined）
      const validAmounts = this.paihangdatadept
        .map((item) => item.checkHuikuan || 0) // 如果 checkHuikuan 不存在，默认设置为 0
        .filter((value) => !isNaN(value)); // 过滤掉 NaN

      // 如果没有有效值，返回最小宽度 10%
      if (validAmounts.length === 0) return 10;

      // 计算最大值
      const maxAmount = Math.max(...validAmounts);

      // 如果最大值为 0，返回最小宽度 10%
      if (maxAmount === 0) return 10;

      // 计算宽度，并限制在 10% 到 90% 之间
      const width = (amount / maxAmount) * 90;
      return Math.min(Math.max(width, 10), 90);
    },
    // 根据排名设置进度条颜色
    getFillColor(index) {
      if (index === 0) {
        // 第一名渐变色
        return "linear-gradient(-90deg, #FE8E00 0%, #FFFFFF 98%)";
      } else if (index === 1) {
        // 第二名渐变色
        return "linear-gradient(-90deg, #FF8460 0%, #FFFFFF 100%)";
      } else {
        // 其他名次统一渐变色
        return "linear-gradient(90deg, #FFFFFF 0%, #62AAFA 100%)";
      }
    },
    getAvatar(index) {
      // 根据索引返回不同的头像
      return index % 2 === 0 ? this.manHead : this.womanHead;
    },
  },
};
</script>
<style lang="less">
@import "../typical-home.less";
</style>
<style>
.yemubiaotext {
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
  color: #333;
}

.yemubiaotitle {
  height: 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
  color: #333;
}

.shujianbaocounts {
  font-size: 17.6px;
  font-family: D-DIN DIN;
  font-weight: 700;
  line-height: 17.6px;
  color: #000;
  -webkit-text-stroke: 1 transparent;
  height: 17.6px;
  opacity: 0.85;
}

.shujianbaomiaosu {
  font-size: 14px;
  font-weight: 400;
  line-height: 11.2px;
  height: 11.2px;
  color: #777;
  -webkit-text-stroke: 1 transparent;
  opacity: 1;
}

.shujianbaohuanbi {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 11.2px;
  height: 11.2px;
  color: #777;
  -webkit-text-stroke: 1 transparent;
  opacity: 1;
}

.shujianbaohuanbishu {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  height: 16px;
  color: #666;
}

.shujianbaocardbg {
  background: hsla(0, 0%, 98%, 0.39);
}

.mhover:hover {
  cursor: hand;
}

.mhover {
  cursor: pointer;
}

.data-view {
  padding: 20px;
  display: flex;
}

.data-box {
  width: 19%;
  margin-right: 1%;
  padding: 20px 30px;
  height: 100px;
  border-radius: 10px;
}

.data-box .data-number {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
}

.data-box .data-info {
  font-size: 14px;
  color: #ffffff;
  margin-top: 10px;
}

.data-box .data-info span {
  cursor: pointer;
}

.color-1 {
  background-color: #ff835f;
  background-image: url("../../../assets/images/index-icon1.png");
  background-repeat: no-repeat;
  background-size: 80px 80px;
  background-position-x: right;
  background-position-y: bottom;
}

.color-2 {
  background-color: #2d9ef7;
  background-image: url("../../../assets/images/index-icon2.png");
  background-repeat: no-repeat;
  background-size: 90px 80px;
  background-position-x: right;
  background-position-y: bottom;
}

.color-3 {
  background-color: #837dfc;
  background-image: url("../../../assets/images/index-icon3.png");
  background-repeat: no-repeat;
  background-size: 90px 80px;
  background-position-x: right;
  background-position-y: bottom;
}

.color-4 {
  background-color: #15c7bf;
  background-image: url("../../../assets/images/index-icon4.png");
  background-repeat: no-repeat;
  background-size: 100px 80px;
  background-position-x: right;
  background-position-y: bottom;
}

.color-5 {
  background-color: #817bfc;
  background-image: url("../../../assets/images/index-icon5.png");
  background-repeat: no-repeat;
  background-size: 100px 80px;
  background-position-x: right;
  background-position-y: bottom;
}

.flex {
  display: flex;
}

.warp {
  flex-wrap: wrap;
}

.d-item {
  padding: 0 10px;
  width: 15.6%;
  height: 90px;
  background-color: #f6f8fa;
  border-radius: 5px;
  margin-right: 10px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.d-item img {
  width: 60px;
  height: 60px;
}

.d-info {
  margin-left: 10px;
  padding-top: 10px;
  line-height: 10px;
}

.d-title {
  color: #989898;
  /* font-size: 16px; */
}

.d-number {
  font-size: 16px;
  font-weight: 600;
}

.rank-title {
  text-align: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 12px;
}

.echarts-box {
  width: 100%;
  margin-top: -12px;
}

.echarts-item {
  width: 100%;
  /* min-height: 500px; */
}

.warn-box {
  width: 48%;
  height: 50px;
  margin: 0 1%;
  margin-bottom: 5px;
  border: 1px solid #e5e6e9;
  border-radius: 5px;
  display: flex;
  align-items: center;
  position: relative;
}

.warn-title {
  font-size: 16px;
  color: #8c8c8c;
  padding-left: 20px;
}

.warn-number {
  font-size: 18px;
  font-weight: 600;
  position: absolute;
  right: 20px;
  color: #f9623f;
}

.btn-img {
  width: 53px;
  height: 53px;
}

.more-span {
  color: #8c8c8c;
  cursor: pointer;
}

.list-box {
  width: 100%;
  cursor: pointer;
}

.list-box .list {
  width: 100%;
  border-bottom: 1px solid #f4f4f4;
  align-items: center;
  padding: 10px 0;
}

.list-box .list p {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  /* white-space: nowrap; */
}

.list-box .list p span {
  flex: 1; /* 让 span 占据剩余空间 */
  /* overflow: hidden;
  text-overflow: ellipsis; */
}

.list-box .list:last-child {
  border-bottom: 0;
}

.list-img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.list-time {
  color: #b2aeb9;
  font-size: 14px;
  padding-left: 25px;
}

.list-goto {
  position: absolute;
  right: 10px;
  color: #f87b71;
}

.rank-view {
  width: 100%;
  margin-top: 22px;
}

.rank-line {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}

.line-back {
  width: 100%;
  background-color: #f5f5f5;
  border-radius: 9px;
  margin-top: 8px;
  height: 25px;
}

.line-fill {
  height: 100%;
  border-radius: 9px;
  transition: width 0.3s ease;
  position: relative; /* 添加相对定位 */
}

.rank-amount {
  font-size: 14px;
  color: #ffffff;
  position: absolute; /* 添加绝对定位 */
  right: 20px; /* 距离右侧10px */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 垂直居中 */
}

.rank-amount2 {
  font-size: 14px;
  color: #ffffff;
  position: absolute; /* 添加绝对定位 */
  right: 10px; /* 距离右侧10px */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 垂直居中 */
}

.rank-avatar {
  width: 30px; /* 头像大小 */
  height: 30px; /* 头像大小 */
  border-radius: 50%; /* 圆形头像 */
  position: absolute; /* 绝对定位 */
  margin-top: -2px;
  right: -15px; /* 距离右侧10px */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 垂直居中 */
}

.ant-table-thead > tr > th {
  background: #ffffff;
}

.ant-table-tbody > tr > td {
  /* border-bottom: 0; */
  height: 40px;
}
</style>
